<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择</title>

    <style>
        body p{
            background: antiquewhite;
        }
        body>p{
            color: chartreuse;
            background: #FF0000;
        }
        .p3+ul{
            background:blueviolet;
        }
        .p1~p{
            font-size: 50px;
        }
    </style>

</head>

<!--选择器	类   型	功能描述*/-->
<!--E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内*-->
<!--E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素-->
<!--E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面-->
<!--E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素-->


<body>
    <p class="p1">p1</p>
    <p>p2</p>
    <p class="p3">p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>
</html>